<template>
   <div class="page-head">
       <div class="page-title">
            <div class="page-tab display-inline">{{pageHead.pageTab}}</div>
           <div class="page-title-name display-inline">{{pageHead.pageTitle}}</div>
       </div>
       <div class="detail-title" v-if="pageHead.detailTitle">{{pageHead.detailTitle}}</div>
   </div>
</template>

<script>
  export default {
    name: 'pageHead',
    props:['pageHead'],
    data() {
      return {}
    },
    created() {
    },
    mounted() {
    },
    methods: {},
    components: {}
  }
</script>

<style lang="scss">
    .page-head{
        .page-title {
            padding: 35px 0 40px 0;
            font-size: 21px;
            .display-inline {
                display: inline-block;
                vertical-align: middle;
            }
            .page-tab{
                padding: 5px 20px;
                width: 80px;
                border-top-right-radius:50px;
                border-bottom-right-radius:50px;
                text-align: right;
                background: #3B6FB7;
                color: #F7F8F8;
            }
            .page-title-name {
                color: #3B6FB7;
                margin-left: 15px;
                font-weight: bold;
            }
        }
        .detail-title {
            color: #0A122D;
            font-weight: bold;
            padding: 0 35px;
            font-size: 16px;
        }
    }
</style>
